<template>
  <el-dialog
    :visible.sync="visible"
    title="完成服务"
    width="60%"
    :before-close="handleClose"
  >
    <el-form
      :model="completeServiceForm"
      :rules="completeServiceFormRules"
      ref="completeServiceFormRef"
      label-width="110px"
    >
      <el-form-item label="完成服务时间" prop="finish_time">
        <el-date-picker
          v-model="completeServiceForm.finish_time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务凭证" prop="evidences" required>
        <el-upload
          :action="ossUrl"
          :headers="ossHeader"
          list-type="picture-card"
          :auto-upload="true"
          :limit="imgLimit"
          v-model="completeServiceForm.evidences"
          :on-success="uploadSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :data="{ system: 'chongtai', module: '服务凭证' }"
          :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
          :on-change="imgChange"
          :before-upload="beforeUpload"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button class="theme-background-color" @click="saveFormData"
        >确 定</el-button
      >
    </span>
    <!-- 放大图片弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="45%" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  props: {
    completeServiceDialogVisible: {
      type: Boolean,
      default: function () {
        return {}
      }
    },
    orderServiceId: {
      type: Number,
      default: function () {
        return {}
      }
    }
  },
  data() {
    var imageValidatorMulti = (rule, value, callback) => {
      // console.log(rule)
      if (this.completeServiceForm[rule.field].length == 0) {
        callback(new Error('请上传服务凭证'))
      }
      callback()
    }
    return {
      visible: false,
      completeServiceForm: {
        finish_time: '',
        evidences: []
      },
      completeServiceFormRules: {
        finish_time: [{ required: true, message: '请选择', trigger: 'change' }],
        evidences: [{ validator: imageValidatorMulti }]
      },
      // 图片信息
      ossUrl: this.GLOBAL.ossUrl,
      ossHeader: this.GLOBAL.ossHeader,
      imgLimit: 2,
      showBtnImg: true,
      noneBtnImg: false,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:completeServiceDialogVisible', false)
          done()
        })
        .catch((_) => {})
    },
    closeDialog() {
      this.$emit('update:completeServiceDialogVisible', false)
    },
    saveFormData() {
      this.$refs.completeServiceFormRef.validate(async (valid) => {
        if (!valid) return
        this.completeServiceForm.order_id = this.orderServiceId
        console.log(this.completeServiceForm)

        const postData = JSON.parse(JSON.stringify(this.completeServiceForm))
        postData.evidences = postData.evidences.join(',')
        const { data: res } = await this.$http.post(
          'admin/OrderBooking/yesFinish',
          postData
        )
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success('成功完成服务')
        this.visible = false
        this.$emit('update:completeServiceDialogVisible', false)
        this.$parent.getDetailData()
      })
    },
    uploadSuccess(response, file, fileList) {
      if (Number.parseInt(response.code) === 10001) {
        this.completeServiceForm.evidences.push(response.data.url)
      } else {
        this.$message.error(response.message)
        var a = fileList.findIndex((item) => item.uid === file.uid)
        if (a !== -1) {
          fileList.splice(a, 1)
        }
      }
    },
    // 放大图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //   删除图片
    handleRemove(file, fileList) {
      var a = this.completeServiceForm.evidences.findIndex(
        (item) => item === file.response.data.url
      )
      if (a !== -1) {
        this.completeServiceForm.evidences.splice(a, 1)
      }
      this.noneBtnImg = fileList.length >= this.imgLimit
    },
    imgChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.imgLimit
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      } else if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  watch: {
    completeServiceDialogVisible() {
      this.visible = this.completeServiceDialogVisible
      if (!this.visible) {
        this.$refs.completeServiceFormRef.resetFields()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 80%;
  margin-left: 15px;
  .el-select {
    width: 100%;
  }

  /deep/ .uoloadSty .el-upload--picture-card {
    width: 230px;
    display: true;
  }
  /deep/ .disUoloadSty .el-upload--picture-card {
    display: none; /* 上传按钮隐藏 */
  }
  /deep/ .uoloadSty .el-upload-list__item {
    width: 230px;
  }
}
</style>
